<template>
    <div class="customer-card">
        <div class="top-box">
            <span class="title-box">活动参与情况</span>
            <div>
                <span class="status">活动状态</span>
                <el-select
                    v-model="formData.activity_status"
                    class="select"
                    placeholder="请选择客户状态"
                    @change="seachFun">
                    <el-option label="全部" :value="0"></el-option>
                    <el-option label="未开始" :value="1"></el-option>
                    <el-option label="进行中" :value="2"></el-option>
                    <el-option label="已结束" :value="3"></el-option>
                    <el-option label="提前结束" :value="4"></el-option>
                </el-select>
                <span class="status date">时间筛选</span>
                <el-date-picker
                    v-model="formData.filter_time"
                    class="picker"
                    :default-time="defaultTime"
                    :editable="false"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    format="YYYY-MM-DD HH:mm:ss"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="seachFun" />
            </div>
        </div>

        <div v-if="tableData.length">
            <el-table ref="multipleTableRef" :data="tableData" class="table-box">
                <el-table-column label="活动类型">
                    <template #default="scope">
                        {{ scope.row.activity_type_name || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="活动名称">
                    <template #default="scope">
                        {{ scope.row.activity_name || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="活动有效期" show-overflow-tooltip>
                    <template #default="scope">
                        {{
                            scope.row.period_type == 1
                                ? '永久有效'
                                : (scope.row.begin_date || '--') + '-' + (scope.row.end_date || '--')
                        }}
                    </template>
                </el-table-column>
                <el-table-column label="活动状态">
                    <template #default="scope">
                        <span :style="StatusColor(scope.row.activity_status, 'obj')?.color">{{
                            StatusColor(scope.row.activity_status, 'obj')?.name
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="活动参与时间" show-overflow-tooltip>
                    <template #default="scope">
                        {{ scope.row.join_time || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <div class="btn-box">
                            <el-popover
                                v-if="scope.row.activity_type == 16"
                                :width="200"
                                trigger="click"
                                effect="dark"
                                content="群裂变已升级为2.0版本，历史数据不支持查看">
                                <template #reference>
                                    <el-button size="small">查看</el-button>
                                </template>
                            </el-popover>
                            <el-button v-else size="small" @click="toDetail(scope.row)">查看</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="page-limit-box">
                <ZWPagination ref="ZWPaginationRef" @submit="pageChangeFun" />
            </div>
        </div>
        <el-empty v-else image="/static/noData.png" description="暂无数据"></el-empty>
    </div>
</template>

<script lang="ts" setup>
import { StatusColor } from '@/utils/smartMarketing';
import { nextTick, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ZWPagination from '@/components/ZWPagination.vue';
import { activityJoin } from '@/api/customerCenter';
import { useStore } from '@/store';

const store = useStore();
const colorArr = ref(['#969696', '#59D2A0', '#FF6B00', '#FE292B']);
const tableData = ref([]);
const ZWPaginationRef = ref(null);
const multipleTableRef = ref(null);
const route = useRoute();
const router = useRouter();
const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)];
const formData = ref({
    cust_id: '',
    activity_status: 0, //  0：全部 1:未开始 2:进行中 3:已结束 4:提前结束
    filter_time: [],
    page_size: 15,
    page: 1
});

formData.value.cust_id = route.query.id || '';

// 1-渠道活码 2-群活码 3-抽奖引流 4-红包拉新 5-门店获客 6-裂变引流 7-红包裂变 8-签到活动 9-口令红包
//  query: { type: 'look', id: data.id }
// let pathArr = [
//   { path: '/smartMarketing/drainage/channelCode/newGroupCode', query: { id: '', type: 'look' } }, //渠道活码
//   { path: '/smartMarketing/drainage/groupCode/newCode', query: { id: '', type: 'look' } }, //群活码
//   { path: '/smartMarketing/drainage/luckyDraw/statistics', query: { id: '', type: 'look' } }, //抽奖引流
//   { path: '/smartMarketing/drainage/redEnvelopes/statistics', query: { id: '', type: 'look' } }, //红包拉新
//   { path: '/smartMarketing/drainage/storeCustomers/statistics', query: { id: '', type: 'look' } }, //门店获客
//   { path: '/smartMarketing/fission/fissionDrainage/statistics', query: { id: '', type: 'look' } }, //裂变引流
//   { path: '/smartMarketing/fission/envelopesFission/participant', query: { id: '', type: 'look' } }, //红包裂变
//   { path: '/smartMarketing/interact/signIn/detail', query: { id: '', type: 'look' } }, //签到活动
//   { path: '/smartMarketing/interact/order/statistics', query: { id: '', type: 'look' } } //口令红包
// ]
const pathObj = {
    1: { path: '/smartMarketing/drainage/channelCode/newGroupCode', query: { id: '', type: 'look' } }, //渠道活码
    2: { path: '/smartMarketing/drainage/groupCode/newCode', query: { id: '', type: 'look' } }, //群活码
    3: { path: '/smartMarketing/drainage/luckyDraw/statistics', query: { id: '', type: 'look' } }, //抽奖引流
    4: { path: '/smartMarketing/drainage/redEnvelopes/statistics', query: { id: '', type: 'look' } }, //红包拉新
    5: { path: '/smartMarketing/drainage/storeCustomers/statistics', query: { id: '', type: 'look' } }, //门店获客
    6: { path: '/smartMarketing/fission/fissionDrainage/statistics', query: { id: '', type: 'look' } }, //裂变引流
    7: { path: '/smartMarketing/fission/envelopesFission/participant', query: { id: '', type: 'look' } }, //红包裂变
    8: { path: '/smartMarketing/interact/signIn/detail', query: { id: '', type: 'look' } }, //签到活动
    9: { path: '/smartMarketing/interact/order/statistics', query: { id: '', type: 'look' } }, //口令红包
    10: { path: '/smartMarketing/drainage/luckyDraw/statistics', query: { id: '', type: 'look' } }, // 裂变抽奖
    17: { path: '/smartMarketing/drainage/groupFission/statistics', query: { id: '', type: 'look' } } //群裂变
};
// 前往查看
const toDetail = (val: any) => {
    const arr = [
        '渠道活码',
        '群活码',
        '抽奖引流',
        '红包拉新',
        '门店获客',
        '裂变引流',
        '红包裂变',
        '签到活动',
        '口令红包'
    ];
    const param = pathObj[val.activity_type];
    param.query.id = val.activity_id;
    router.push(param);
};

// 搜索
const seachFun = () => {
    nextTick(() => {
        ZWPaginationRef.value.initPage = true;
    });
    formData.value.page = 1;
    getTableList();
};

// 获取活动参与情况
const getTableList = () => {
    activityJoin(formData.value).then((r: any) => {
        tableData.value = r.data;
        store.dispatch('pageTotal', r.total);
    });
};
nextTick(() => {
    getTableList();
});

// 当前分页改变
const pageChangeFun = (val: object) => {
    formData.value.page = val.page;
    formData.value.page_size = val.page_size || formData.value.page_size;
    getTableList();
};
</script>

<style lang="scss" scoped>
.customer-card {
    padding: 16px 20px;
    .top-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-family: STHeitiSC-Medium, STHeitiSC;
        font-weight: 500;
        color: #33302d;
        margin-bottom: 16px;
        .title-box {
            white-space: nowrap;
        }
        div {
            .status {
                white-space: nowrap;
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                color: #33302d;
                padding-right: 10px;
            }
            .date {
                padding-left: 20px;
            }
            display: flex;
            align-items: center;
        }
    }
    .btn-box {
        text-align: left;
        div {
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;
            width: 80px;
            height: 24px;
            background: #ffffff;
            border-radius: 2px;
            border: 1px solid #eaeaea;
            text-align: center;
            line-height: 24px;
            margin: 0 6px 5px;
        }
    }
}
</style>
